
.jw-box{
    width: 100%;
    height: 100%;
    // background: #0E162C url('~@/assets/img/jwrz/body.jpg') no-repeat 0 0;
    // background-size: 100% 100%;
    font-size: 0.3rem;
    position: relative;
    z-index: 1;

    .jw-heard{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 6%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #0E162C url('~@/assets/img/header.jpg') no-repeat 0 0;
      background-size: 100% 100%;
      pointer-events: none;
      h2{
        font-size: 0.6rem;
        letter-spacing: 0.08rem;
        font-family: '黑体';
        font-weight: normal;
      }
    }

    .jw-main{
      position: absolute;
      top: 6%;
      left: 0;
      width: 100%;
      height: 94%;
      pointer-events: none;
    }

    .jw-layout{
      width: 100%;
      height: 100%;
      padding: 0.1rem;
      & > li{
        width: 30%;
        height: 100%;
        float: left;
        padding: 0.1rem;
        pointer-events: auto;
        &:nth-child(2){
          width: 40%;
          position: relative;
          pointer-events: none;
        }
      }
    }

    .jw-container{
      width: 100%;
      height: 100%;
      background-color: rgba($color: #082d71, $alpha: 0.29);
    }

    .jw-left-up{
      width: 100%;
      height: 44%;
    }

    .jw-left-down{
      width: 100%;
      height: 56%;
    }

    .jw-common{
      width: 100%;
      height: 100%;
      &-title{
        width: 100%;
        height: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3{
          font-family: "黑体";
          font-size: 0.45rem;
          height: 0.6rem;
          line-height: 0.6rem;
          padding-left: 0.6rem;
          font-weight: normal;
          background: url('~@/assets/img/icon_title.png') no-repeat left center;
          background-size: auto 100%;
          letter-spacing: 2px;
        }
        .jw-date{
          height: 0.6rem;
        }
      }
      &-content{
        width: 100%;
        height: calc(100% - 0.8rem);
      }
    }

    .jw-grid{
      width: 100%;
      height: 100%;
      border: 1px #1e6f9b solid;
      & > li{
        width: 50%; 
        height: 50%;
        float: left;
        padding: 0.1rem;
        &:nth-child(1),&:nth-child(3){
          border-right: 1px #1e6f9b solid;
        }
        &:nth-child(3),&:nth-child(4){
          border-top: 1px #1e6f9b solid;
        }
      }
    }

    .jw-basic{
      width: 100%;
      height: 100%;
      & > li{
        width: 100%;
        height: 70%;
        &:nth-child(1){
          padding-bottom: 0.075rem;
        }
        &:nth-child(2){
          height: 30%;
          padding-top: 0.075rem;
        }
      }
    }


    .jw-case{
      background-color: rgba($color: #008999, $alpha: 0.07);
      width: 100%;
      height: 100%;
      padding: 0.15rem;
    }

    .js-basic-items{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .js-basic-item{
      display: flex;
      height: 49%;
      border: 1px #1e6f9b solid;
      align-items: center;
    }


    .jw-grid-con{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .tit{
        color: #00e4ff;
        font-size: 0.5rem;
        font-weight: bold;
      }
      .unit{
        color: #00e4ff;
        font-size: 0.4rem;
        font-weight: bold;
      }
      .con{
        font-size: 0.3rem;
      }
    }

    .js-bi-con{
      flex: 1 1 33%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px #1e6f9b solid;
      &:last-child{
        border-right: none;
      }
      .tit{
        color: #00e4ff;
        font-size: 0.5rem;
        font-weight: bold;
      }
      .unit{
        color: #00e4ff;
        font-size: 0.35rem;
        font-weight: bold;
      }
      .con{
        font-size: 0.3rem;
      }
    }

    .js-bic-img{
      width: 2.6rem;
      text-align: center;
      img{
        display: inline-block;
        width: 1.5rem;
      }
    }

    .js-bic-con{
      flex: 1 1 2rem;
    }


    .js-basic-updown{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-content: center;
      align-items: center;
    }

    .js-bu-item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .js-bui-report{
        width: 1.8rem;
        height: 1.8rem;
      }
    }

    .selectDate{
      height: 0.6rem !important;
      font-size: .4rem !important;
      border: 1px solid #009bd0 !important;
      background-color: #20568c !important;
      width: 3.2rem !important;
      /deep/ .el-input__suffix{
          right: 0;
          top: 0;
          width: 0.6rem;
      }
      /deep/  .el-input__inner {
        padding-left: 0.5rem !important;
      }
      /deep/ .el-input__inner {
        padding-right: 0.4rem !important;
      }
      /deep/ .el-input__inner{
        font-size: 0.3rem !important;
      }
      /deep/ .el-input__suffix-inner{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /deep/ .el-icon-circle-close:before{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        color: #fff;
      }
      /deep/ .el-icon-date:before{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        color: #fff;
      }
      /deep/ .el-input--suffix .el-input__inner {
          padding:0 0.6rem 0 0.4rem;
          color: #fff !important;
      }
    }

    .jw-show-data{
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 80%;
      .jw-data{
        flex: 1 1 auto;
        margin: 0 0.5rem;
        color: #fff;
        font-size: 0.4rem;
        font-weight: bold;
        text-align: center;
        .num{
          font-family: unidreamLED;
          font-size: 1rem;
          color: #17e6ff;
          font-weight: normal;
        }
        .unit{
          font-family: '微软雅黑';
          font-size: 0.5rem;
          color: #17e6ff;
        }
      }
    }

    .right-frame{
      width: 100%;
      height: 100%;
      & > li{
        width: 100%;
        height: 34%;
        &:nth-child(2){
          height: 44%;
        }
        &:nth-child(3){
          height: 22%;
        }
      }
    }

    .jw-remind{
      display: flex;
      justify-content: space-around;
      align-items: center;
      &-item{
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .jw-remind-img{
          width: 2.4rem;
          text-align: center;
          img{
            display: inline-block;
            width: 1.8rem;
          }
        }
        .jw-remind-info{
          font-size: 0.35rem;
          .tit{
            font-size: 0.55rem;
            color: #00e4ff;
            margin-bottom: 0.2rem;
            .unit{
              font-size: 0.35rem;
              margin-left: 0.1rem;
              font-weight: bold;
            }
          }
          
          .name{
            font-weight: bold;
          }
        }
      }
    }
    .jw-incident-chart{
      width: 65%;
      height: 100%;
      float: left;
    }
    .jw-incidentp-info{
      width: 35%;
      height: 100%;
      float: left;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      align-content:space-around;
      padding: 0.5rem;
    }

    .jw-ii-item{
      flex: 1 1 50%;
      position: relative;
      padding-left: 0.25rem;
      .tit{
        font-size: 0.25rem;
        font-weight: bold;
        color: rgba($color: #fff, $alpha: 0.8);
      }
      .info{
        font-size: 0.3rem;
        font-weight: bold;
      }
    }

    .jw-ii-item::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0.06rem;
      height: 100%;
      background-color: #2da9de;
      border-radius: 0.02rem;
    }

    .jw-ii-item:nth-child(2)::before{
      background-color: #57bec8;
    }

    .jw-ii-item:nth-child(3)::before{
      background-color: #2668af;
    }

    .jw-ii-item:nth-child(4)::before{
      background-color: #d59825;
    }

    .jw-ii-item:nth-child(5)::before{
      background-color: #4db039;
    }

    .jw-ii-item:nth-child(6)::before{
      background-color: #aa6bb4;
    }


    .jw-ii-item:nth-child(7)::before{
      background-color: #6472dc;
    }

    .jw-ii-item:nth-child(8)::before{
      background-color: #e39957;
    }

    .jw-ii-item:nth-child(9)::before{
      background-color: #e4dc62;
    }

    .jw-ii-item:nth-child(10)::before{
      background-color: #e46262;
    }

    .jw-search{
      display: flex;
      width: 100%;
      height: 100%;
      padding: 0.1rem;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      span{
        font-size: 0.6rem;
        font-family: '黑体';
        letter-spacing: 0.02rem;
      }
      img{
        display: inline-block;
        height: 0.8rem;
        margin-left: 0.2rem;
      }
    }
    
}
